<template>
  <div>
    <div>
      <Button STYLE="margin-bottom: 10px" type="primary">创建</Button>
      <Table   highlight-row border :columns="columns" :data="data" size="small" ref="table"  @on-row-click="onCurrentChange"></Table>
    </div>
    <div>
      <Page style="margin-top: 10px;text-align: center"  @on-change="handlePageChange"  :current="currentPage" :total="total" show-total />
    </div>
  </div>

</template>
<script>


import EditService from "@/components/EditService.vue";
import axios from "axios";

export default {
  name:'UserRoles',
  data () {
    return {
      data:[],
      id: null,
      currentPage: 1, // 当前页码
      total:0,
      columns: [
        {
          title: '名称',
          key: 'rolename',
          align: 'center',
          render: (h, params) => {
            // 返回一个可点击的链接
            return h('a', {
              on: {
                click: () => {
                  let url = '/dashboard/users/role/details?tab=name1'
                  this.$router.push(url);
                }
              }
            }, params.row.rolename); // 显示平台名称
          }

        },
        {
          title: '用户数量',
          key: 'rolecount',
          align: 'center',

        },
        {
          title: '备注',
          key: 'romark',
          align: 'center',

        },
        {
          title: '操作',
          key: 'more',
          align: 'center',
          render: (h, params) => {
            return h('div', {
              style: {
                display: 'flex',
                justifyContent: 'center'
              }
            }, [
              h('Button', {
                props: {
                  type: 'error'
                },
                style: {
                  marginRight: '10px'
                },
                on: {
                  click: () => this.deleteItem(params.row) // 这里传递当前行数据给删除方法
                }
              }, '删除'),
              h(EditService, {
                props: {
                  type: 'primary',
                  id: params.row.id
                },
              }, '编辑')
            ]);
          }
        }
      ],
    }
  },
  mounted() {
    this.getUsersData();     // 在组件加载时获取数据
  },
  methods: {
    onCurrentChange(currentRow){
      this.id = currentRow.ID
    },
    handlePageChange(currentPage){
      // 当页码变化时，更新currentPage并重新获取表格数据
      this.currentPage = currentPage;
      this.getUsersData();
    },
    getUsersData() {
      axios.get(`http://172.30.53.223:8888/api/users/role`)
          .then(response => {
            if (response.data.rolelist === null) {
              this.data = [];
            } else {
              this.data = response.data.rolelist.map(rolelist => ({
                rolename: rolelist.RoleName,
                rolecount: rolelist.RoleCount,
                remark:  rolelist.Remark,
              }));
            }
            this.total = response.data.total;
          })
          .catch(error => {
            console.error("获取数据出错:", error);
          });
    },
  },
}
</script>
